<template>
  <div id="app">
    <div>导航</div>
    <div @click="lookRouter">查看路由</div>
    <div class="nav">
      <div class="nav_item" v-for="(item,index) in $router.options.routes" :key="index" @click="goto(item)">{{item.meta.title}}</div>
    </div>
    <router-view/>
  </div>
</template>
<script>
import { asyncRroutes } from '@/router'
export default {
  name: '',
  data () {
    return {

    }
  },
  created () {
    this.addPower()
  },
  methods: {
    goto (info) {
      if (info.path === this.$route.path) {
        return false
      }
      this.$router.push(info.path)
    },
    addPower () {
      this.$router.addRoutes([...asyncRroutes])
      this.$router.options.routes.push(...asyncRroutes)
    },
    lookRouter () {
      console.log(this.$router)
    }
  }
}
</script>

<style lang="scss">
.nav {
  display: flex;
  .nav_item {
    background-color: skyblue;
    margin-right: 20px;
  }
}
</style>
